<template>
  <div class="app-container">
    <el-tabs v-model="tabActiveName" @tab-click="fetchData">
      <el-tab-pane name="WAIT_DEAL">
        <span slot="label">
          <i class="el-icon-s-order"></i>&nbsp;待办箱
        </span>
      </el-tab-pane>
      <el-tab-pane name="ALREADY_DEAL">
        <span slot="label">
          <i class="el-icon-s-claim"></i>&nbsp;已办箱
        </span>
      </el-tab-pane>
    </el-tabs>

    <div class="filter-container">
      <el-form :inline="true" label-position="right" label-width="90px">
        <el-form-item label="业务编号">
          <el-input v-model="listQuery.number" placeholder="业务编号" />
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="listQuery.name" placeholder="项目名称" />
        </el-form-item>
        <el-form-item label="所在区县">
          <el-select
            @change="changePage(1)"
            placeholder="所在区县"
            v-model="listQuery.district"
            clearable
          >
            <el-option
              v-for="(item, index) in districtData"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="changePage(1)" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="filter-container" v-if="tabActiveName == 'WAIT_DEAL'">
      <el-button
        class="filter-item"
        type="primary"
        @click="showWindow(0)"
        :loading="isBtnLoading"
      >一键审签（同意）</el-button>
      <el-button
        class="filter-item"
        type="danger"
        @click="showWindow(1)"
        :loading="isBtnLoading"
      >一键审签（不同意）</el-button>
    </div>
    <div v-show="tabActiveName == 'WAIT_DEAL'">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="加载中"
        @selection-change="handleSelectionChange"
        highlight-current-row
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="number" label="业务编号"></el-table-column>
        <el-table-column prop="district" label="所在区县"></el-table-column>
        <el-table-column prop="type" label="项目类型"></el-table-column>
        <el-table-column prop="level" label="项目级别"></el-table-column>
        <el-table-column prop="name" label="项目名称"></el-table-column>
        <el-table-column prop="link" label="当前所处环节"></el-table-column>
        <el-table-column prop="updateTime" label="上一环节提交时间"></el-table-column>
        <el-table-column prop="updateName" label="提交人"></el-table-column>
        <el-table-column prop="status" label="状态">待审签</el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="tabActiveName == 'ALREADY_DEAL'">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="加载中"
        highlight-current-row
      >
        <el-table-column prop="number" label="业务编号"></el-table-column>
        <el-table-column prop="district" label="所在区县"></el-table-column>
        <el-table-column prop="type" label="项目类型"></el-table-column>
        <el-table-column prop="level" label="项目级别"></el-table-column>
        <el-table-column prop="name" label="项目名称"></el-table-column>
        <el-table-column prop="state" label="状态">已审签</el-table-column>
        <el-table-column label="审批状态">
          <template slot-scope="scope">
            <span :class="scope.row.status === 1 ? 'redcolor':''">{{scope.row.status === 0 ? '通过' : '不通过'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text">查看</el-button>
            <el-button type="text">审查意见表</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        @current-change="changePage"
        :page-size="listQuery.rows"
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog :close-on-click-modal="false" title="审批意见" :visible.sync="dialogVisible" width="30%">
      <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="opinion"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="btnShenqian">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryAllDistrict } from "@/api/project/xmkgh/xmspread";
import {
  oneClickSigning,
  getUpcomingList,
  getHasBeenDoneList
} from "@/api/project1/buntchCheckCityCenter/buntchCheckCityCenter";
import store from "@/store";
import { getTime } from "@/api/getTime";

export default {
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        rows: 10,
        number: null,
        name: null,
        district: null
      },
      tabActiveName: "WAIT_DEAL", ///WAIT_DEAL-待办，ALREADY_DEAL-已办
      districtData: [],
      // role: store.state.user.userInfo.role.extend,
      role: store.state.user.userInfo.roleList,
      selectIds: [], //选择要审签的id
      isBtnLoading: false,
      dialogVisible: false,
      opinion: "",
      status: ""
    };
  },
  methods: {
    showWindow(type) {
      //打开审批意见窗口
      if (type === 0 && this.selectIds.length == 0) {
        this.$message.error("请选择要审签的项目");
        return;
      } else if (type === 1 && this.selectIds.length == 0) {
        this.$message.error("请选择不审签的项目");
        return;
      }
      this.status = type;
      if (type === 0) {
        this.opinion = "同意";
      } else {
        this.opinion = "不同意";
      }
      this.dialogVisible = true;
    },
    btnShenqian() {
      //审签 /不审签
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.isBtnLoading = true;
      let obj = {
        projectIds: this.selectIds,
        status: this.status,
        auditDate: this.opinion
      };
      oneClickSigning(obj)
        .then(res => {
          loading.close();
          this.isBtnLoading = false;
          if (res.code == 1000) {
            this.dialogVisible = false;
            this.$message.success("一键审签成功");
            this.fetchData();
          }
        })
        .catch(error => {
          loading.close();
          this.isBtnLoading = false;
        });
    },
    handleSelectionChange(val) {
      //选择要审签的项目id
      let multipleSelection = val;
      this.selectIds = [];
      multipleSelection.forEach(item => {
        this.selectIds.push(item.id);
      });
    },
    fetchData() {
      //获取列表
      this.listLoading = true;
      if (this.tabActiveName === "WAIT_DEAL") {
        //待办
        getUpcomingList(this.listQuery).then(res => {
          this.listLoading = false;
          this.list = res.data.list;
          this.total = res.data.total;
        });
      } else if (this.tabActiveName === "ALREADY_DEAL") {
        //已办
        getHasBeenDoneList(this.listQuery).then(res => {
          this.listLoading = false;
          this.list = res.data.list;
          this.total = res.data.total;
        });
      }
    },
    changePage(page) {
      //翻页
      this.listQuery.page = page;
      this.fetchData();
    },
    queryAllDistrict() {
      //获取区县列表
      queryAllDistrict().then(res => {
        this.districtData = res.data;
      });
    }
  },
  created() {
    this.queryAllDistrict();
    this.fetchData();
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__item {
  height: 60px;
  font-size: 18px;
  line-height: 60px;
  color: #999;
}
.redcolor {
  color: red;
}
</style>